﻿@using NITASA.Data
@model List<MediaPopUp>
@{
    List<string> Attributes = Model.Select(m => m.TabName).ToList();
}
<style type="text/css">
    #mediapouploader {
        background: none repeat scroll 0 0 #000;
        border-radius: 10px;
        bottom: 50%;
        color: #fff;
        left: 45%;
        opacity: 0.8;
        padding: 10px;
        position: fixed;
        text-align: center;
        width: 90px;
        z-index: 99999;
    }
</style>

    <div id="MediaPopup" class="modal hide wizard-modal in" style="margin-top: -239px;width: 750px; margin-left: -375px; display: none;" aria-hidden="false">
        <div class="wizard-modal-header modal-header">
            <button type="button" data-dismiss="modal" class="wizard-close close">x</button>
            <h3 class="wizard-title">Select Media</h3>
            <span class="wizard-subtitle"></span>
        </div>
        
        <div class="pull-left wizard-steps" style="height: 425px;">
            <div class="wizard-nav-container" style="overflow-y: auto; height: 100%;">
                <ul style="padding-bottom: 30px;" class="nav nav-list">
                    <li id="allAttr" class="wizard-nav-item active" currenttab="all" >
                        <a class="wizard-nav-link" style="color: Black; cursor: pointer;">
                            <i class="icon-chevron-right"></i>All
                        </a>
                    </li>
                    @foreach (string attr in Attributes.Skip(1))
                    {
                        <li id="@attr.Trim().Replace(" ", "").Replace(".","")" currenttab="@attr" class="wizard-nav-item">
                            <a class="wizard-nav-link" style="color: Black; cursor: pointer;">
                                <i class="icon-chevron-right"></i>@attr
                            </a>
                        </li>
                    }
                </ul>
            </div>
        </div>

        <div class="wizard-cards" style="height: 425px;">
            <div class="wizard-card-container" style="overflow-y: auto; height: 100%;">
                <div id="conallAttr" currentpage="0" totalpages="@Model.First().TotalPages"  
                        class="wizard-card" style="height: 84%;display:block;">
                    <div class="wizard-input-section">
                        @if (Model.First().Medias.Count() > 0)
                        {
                            @Html.Partial("~/Areas/Admin/Views/Media/SingleImage.cshtml", Model.First().Medias)
                        }
                        else { 
                            <h3 style="margin-left: 16px;">No media found.</h3>
                        }
                    </div>
                </div>
                @foreach (var attr in Model)
                {
                    <div id="@("con" + attr.TabName.Trim().Replace(" ", "").Replace(".", ""))" 
                                currentpage="0" totalpages="@attr.TotalPages"  class="wizard-card" style="height: 84%;">
                        <div class="wizard-input-section">
                            @if (attr.Medias != null && attr.Medias.Count() > 0)
                            {
                                @Html.Partial("~/Areas/Admin/Views/Media/SingleImage.cshtml", attr.Medias)
                            }
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>


    <div id="mediapouploader" style="display:none;">
        <img src="@Url.Content("/Areas/Admin/assets/images/loader-big.gif")" alt="Loading..." />
    </div>

    <script type="text/javascript">
        var currenttab = "all";
        var currenttabcontentid = "#conallAttr";
        var loading = false;

        $(document).ready(function () {
            $(".wizard-nav-item").click(function (e) {
                $(".wizard-nav-item").removeClass("active");
                $(this).addClass("active");
                $(".wizard-card").css('display', 'none');
                $("#con" + $(this).attr("id")).css('display', 'block');

                currenttab = $(this).attr("currenttab");
                currenttabcontentid = "#con" + $(this).attr("id");
            });
        });
        $(".wizard-card").scroll(function () {
            if (!loading && ($(this).scrollTop() + $(".wizard-card-container").height() + 100 >= this.scrollHeight)) {
                var curentpageindex = parseInt($(currenttabcontentid).attr("currentpage"));
                var totalpages = parseInt($(currenttabcontentid).attr("totalpages"));
                if (curentpageindex < totalpages) {
                    $(currenttabcontentid).attr("currentpage", (curentpageindex + 1));
                    loadmedias();
                }
            }
        });
        function loadmedias() {
            loading = true;
            $("div#mediapouploader").show();
            var curentpageindex = parseInt($(currenttabcontentid).attr("currentpage"));
            $.ajax({
                type: "POST",
                url: "/Admin/Media/LoadPopupMedia",
                data: { attributename: currenttab, CurrentPageIndex: curentpageindex },
                success: function (data) {
                    if (data) {
                        $(currenttabcontentid).find(".wizard-input-section").append(data);
                    }
                    $("div#mediapouploader").hide();
                },
                error: function (data) {
                    console.log(data);
                },
                complete: function () {
                    loading = false;
                }
            });
            return false;
        }
    </script>

